<template>
  <div>
    <!-- 使用新的 Header 组件 -->
    <Header />

    <!-- 主要内容区域 -->
    <main class="main">
      <!-- 主要内容区域 -->
      <section class="main-section">
        <div class="container">
          <div class="main-content">
            <!-- 使用新的 Sidebar 组件 -->
            <Sidebar />
            
            <!-- 右侧内容区域 -->
            <div class="content-area">
              <!-- 促销卡片区域 -->
              <div class="promo-section">
                <!-- 主促销卡片 -->
                <div class="main-promo-card">
                  <div class="promo-bg">
                    <div class="promo-content">
                      <div class="promo-badge">HOT</div>
                      <h3>视分享精选好物</h3>
                      <p class="promo-subtitle">品质商品 <span class="highlight">超值</span> 优惠</p>
                      <button class="promo-cta-btn" @click="handlePromoClick">
                        <span>立即购买</span>
                        <i class="fas fa-arrow-right"></i>
                      </button>
                    </div>
                    <div class="promo-decoration">
                      <div class="decoration-circle circle-1"></div>
                      <div class="decoration-circle circle-2"></div>
                      <div class="decoration-circle circle-3"></div>
                      <i class="fas fa-fish promo-icon"></i>
                    </div>
                  </div>
                </div>
                
                <!-- 分类卡片网格 -->
                <div class="category-grid">
                  <div class="category-card-modern yellow-theme" v-for="card in categoryCards" :key="card.id" @click="handleCategoryCardClick(card)">
                    <div class="card-header">
                      <div class="category-icon-modern">
                        <i :class="card.icon"></i>
                      </div>
                      <div class="category-meta">
                        <h4>{{ card.title }}</h4>
                        <p>{{ card.subtitle }}</p>
                      </div>
                    </div>
                    <div class="product-showcase">
                      <div class="product-mini" v-for="product in card.products" :key="product.id" @click.stop="handleProductClick(product)">
                        <img :src="product.image" :alt="product.name">
                        <div class="product-mini-info">
                          <span class="product-mini-name">{{ product.name }}</span>
                          <span class="price-tag">¥{{ product.price }}</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- 为你推荐商品区域 -->
      <section class="recommended-section">
        <div class="container">
          <div class="creative-header">
            <div class="header-decoration">
              <div class="sparkle sparkle-1">✨</div>
              <div class="sparkle sparkle-2">⭐</div>
              <div class="sparkle sparkle-3">💫</div>
            </div>
            <div class="header-content">
              <h3 class="creative-title">
                <span class="title-icon">🔥</span>
                <span class="title-text">今日爆款</span>
                <span class="title-badge">NEW</span>
              </h3>
              <p class="creative-subtitle">精选好物 · 品质保证 · 限时优惠</p>
            </div>
            <div class="header-accent"></div>
          </div>
          <div class="recommended-grid">
            <div class="product-card-new" v-for="product in recommendedProducts" :key="product.id" @click="handleProductClick(product)">
              <div class="product-image-new">
                <img :src="product.image" :alt="product.title">
                <div class="product-discount" v-if="product.discount">-{{ product.discount }}%</div>
              </div>
              <div class="product-info-new">
                <div class="product-brand">{{ product.brand }}</div>
                <h4 class="product-title-new">{{ product.title }}</h4>
                <div class="product-price-new">
                  <span class="current-price">¥{{ product.currentPrice }}</span>
                  <span class="original-price" v-if="product.originalPrice">¥{{ product.originalPrice }}</span>
                </div>
                <div class="product-features">
                  <span class="feature-tag" v-for="feature in product.features" :key="feature">{{ feature }}</span>
                </div>
                <div class="product-stats">
                  <span class="sales-count">已售 {{ product.salesCount }}</span>
                  <span class="rating">
                    <i class="fas fa-star" v-for="n in 5" :key="n"></i>
                    {{ product.rating }}
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </main>

    <!-- 使用新的 Footer 组件 -->
    <Footer />

    <!-- 产品详情模态框 -->
    <Modal 
      :is-open="showProductModal" 
      title="商品详情"
      @close="showProductModal = false"
    >
      <div v-if="selectedProduct" class="product-modal-content">
        <div class="product-modal-image">
          <img :src="selectedProduct.image" :alt="selectedProduct.title">
        </div>
        <div class="product-modal-info">
          <h3 class="product-modal-title">{{ selectedProduct.title }}</h3>
          <div class="product-modal-brand">{{ selectedProduct.brand }}</div>
          <div class="product-modal-price">
            <span class="current-price">¥{{ selectedProduct.currentPrice }}</span>
            <span class="original-price" v-if="selectedProduct.originalPrice">¥{{ selectedProduct.originalPrice }}</span>
          </div>
          <div class="product-modal-features">
            <h4>商品特色：</h4>
            <ul>
              <li v-for="feature in selectedProduct.features" :key="feature">{{ feature }}</li>
            </ul>
          </div>
          <div class="product-modal-stats">
            <div class="stat-item">
              <span class="stat-label">销量：</span>
              <span class="stat-value">{{ selectedProduct.salesCount }}</span>
            </div>
            <div class="stat-item">
              <span class="stat-label">评分：</span>
              <span class="stat-value">{{ selectedProduct.rating }}</span>
            </div>
          </div>
          <div class="product-modal-actions">
            <button class="btn btn-primary" @click="handleBuyNow(selectedProduct)">
              <i class="fas fa-shopping-cart"></i>
              立即购买
            </button>
            <button class="btn btn-secondary" @click="handleAddToCart(selectedProduct)">
              <i class="fas fa-heart"></i>
              加入购物车
            </button>
          </div>
        </div>
      </div>
    </Modal>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import Header from '@/components/Header.vue'
import Sidebar from '@/components/Sidebar.vue'
import Footer from '@/components/Footer.vue'
import Modal from '@/components/Modal.vue'

const router = useRouter()
const showProductModal = ref(false)
const selectedProduct = ref<any>(null)

// 分类卡片数据
const categoryCards = ref([
  {
    id: 1,
    title: '时尚服饰',
    subtitle: '品质美衣新品上架',
    icon: 'fas fa-tshirt',
    products: [
      { id: 1, name: '时尚T恤', image: 'https://images.unsplash.com/photo-1521572163474-6864f9cf17ab?w=100&h=100&fit=crop&crop=center', price: '280' },
      { id: 2, name: '休闲裤', image: 'https://images.unsplash.com/photo-1544966503-7cc5ac882d5f?w=100&h=100&fit=crop&crop=center', price: '169' },
      { id: 3, name: '运动鞋', image: 'https://images.unsplash.com/photo-1542291026-7eec264c27ff?w=100&h=100&fit=crop&crop=center', price: '46.80' }
    ]
  },
  {
    id: 2,
    title: '手机数码',
    subtitle: '正品保障热销中',
    icon: 'fas fa-mobile-alt',
    products: [
      { id: 4, name: 'iPhone 15', image: 'https://images.unsplash.com/photo-1592750475338-74b7b21085ab?w=100&h=100&fit=crop&crop=center', price: '4599' },
      { id: 5, name: 'MacBook', image: 'https://images.unsplash.com/photo-1517336714731-489689fd1ca8?w=100&h=100&fit=crop&crop=center', price: '700' },
      { id: 6, name: 'Apple Watch', image: 'https://images.unsplash.com/photo-1434493789847-2f02dc6ca35d?w=100&h=100&fit=crop&crop=center', price: '24' }
    ]
  },
  {
    id: 3,
    title: '游戏娱乐',
    subtitle: '游戏装备新品首发',
    icon: 'fas fa-gamepad',
    products: [
      { id: 7, name: 'PS5主机', image: 'https://images.unsplash.com/photo-1606144042614-b2417e99c4e3?w=100&h=100&fit=crop&crop=center', price: '10000' },
      { id: 8, name: 'VR眼镜', image: 'https://images.unsplash.com/photo-1621259182978-fbf93132d53d?w=100&h=100&fit=crop&crop=center', price: '168' },
      { id: 9, name: '游戏手柄', image: 'https://images.unsplash.com/photo-1542751371-adc38448a05e?w=100&h=100&fit=crop&crop=center', price: '25' }
    ]
  },
  {
    id: 4,
    title: '优惠专区',
    subtitle: '限时特价品质保证',
    icon: 'fas fa-percent',
    products: [
      { id: 10, name: '礼品券', image: 'https://images.unsplash.com/photo-1553062407-98eeb64c6a62?w=100&h=100&fit=crop&crop=center', price: '5' },
      { id: 11, name: '化妆品', image: 'https://images.unsplash.com/photo-1522335789203-aabd1fc54bc9?w=100&h=100&fit=crop&crop=center', price: '36' },
      { id: 12, name: '相机', image: 'https://images.unsplash.com/photo-1606983340126-99ab4feaa64a?w=100&h=100&fit=crop&crop=center', price: '599' }
    ]
  }
])

// 推荐商品数据
const recommendedProducts = ref([
  {
    id: 1,
    brand: 'Apple',
    title: 'iPhone 15 Pro 256GB 钛金色',
    currentPrice: '8,999',
    originalPrice: '10,199',
    discount: 12,
    image: 'https://images.unsplash.com/photo-1592750475338-74b7b21085ab?w=400&h=400&fit=crop&crop=center',
    features: ['正品保障', '全国联保', '顺丰包邮'],
    salesCount: '3.2k+',
    rating: '4.9'
  },
  {
    id: 2,
    brand: 'Apple',
    title: 'MacBook Air M3 芯片 512GB 午夜色',
    currentPrice: '9,999',
    image: 'https://images.unsplash.com/photo-1517336714731-489689fd1ca8?w=400&h=400&fit=crop&crop=center',
    features: ['M3芯片', '18小时续航', '免息分期'],
    salesCount: '2.8k+',
    rating: '4.8'
  },
  {
    id: 3,
    brand: 'Canon',
    title: 'EOS R6 Mark II 全画幅微单相机',
    currentPrice: '15,999',
    image: 'https://images.unsplash.com/photo-1606983340126-99ab4feaa64a?w=400&h=400&fit=crop&crop=center',
    features: ['全画幅', '4K视频', '专业级'],
    salesCount: '1.2k+',
    rating: '4.9'
  },
  {
    id: 4,
    brand: 'Louis Vuitton',
    title: 'Neverfull MM 经典手提包 棋盘格',
    currentPrice: '12,800',
    image: 'https://images.unsplash.com/photo-1584917865442-de89df76afd3?w=400&h=400&fit=crop&crop=center',
    features: ['正品保证', '专柜同款', '全球联保'],
    salesCount: '456',
    rating: '4.7'
  },
  {
    id: 5,
    brand: 'Sony',
    title: 'PlayStation 5 游戏主机 光驱版',
    currentPrice: '3,899',
    image: 'https://images.unsplash.com/photo-1606144042614-b2417e99c4e3?w=400&h=400&fit=crop&crop=center',
    features: ['现货发售', '4K游戏', '官方授权'],
    salesCount: '2.1k+',
    rating: '4.8'
  },
  {
    id: 6,
    brand: 'Nike',
    title: 'Air Max 270 React 跑步鞋 黑白配色',
    currentPrice: '899',
    image: 'https://images.unsplash.com/photo-1542291026-7eec264c27ff?w=400&h=400&fit=crop&crop=center',
    features: ['气垫科技', '透气网面', '多色可选'],
    salesCount: '4.5k+',
    rating: '4.6'
  },
  {
    id: 7,
    brand: 'Samsung',
    title: 'Galaxy S24 Ultra 512GB 钛灰色',
    currentPrice: '9,199',
    originalPrice: '9,999',
    discount: 8,
    image: 'https://images.unsplash.com/photo-1574944985070-8f3ebc6b79d2?w=400&h=400&fit=crop&crop=center',
    features: ['AI拍照', 'S Pen', '200MP相机'],
    salesCount: '1.8k+',
    rating: '4.7'
  },
  {
    id: 8,
    brand: 'Dell',
    title: 'XPS 13 Plus 轻薄笔记本 i7处理器',
    currentPrice: '8,999',
    image: 'https://images.unsplash.com/photo-1527864550417-7fd91fc51a46?w=400&h=400&fit=crop&crop=center',
    features: ['13.4英寸', 'OLED屏幕', '轻薄设计'],
    salesCount: '967',
    rating: '4.6'
  },
  {
    id: 9,
    brand: 'Sony',
    title: 'α7R V 全画幅微单相机 单机身',
    currentPrice: '25,999',
    image: 'https://images.unsplash.com/photo-1502920917128-1aa500764cbd?w=400&h=400&fit=crop&crop=center',
    features: ['6100万像素', '8K视频', '专业摄影'],
    salesCount: '523',
    rating: '4.9'
  },
  {
    id: 10,
    brand: 'Gucci',
    title: 'GG Marmont 绗缝肩背包 黑色',
    currentPrice: '18,900',
    image: 'https://images.unsplash.com/photo-1553062407-98eeb64c6a62?w=400&h=400&fit=crop&crop=center',
    features: ['意大利制造', '真皮材质', '经典款式'],
    salesCount: '289',
    rating: '4.8'
  },
  {
    id: 11,
    brand: 'Microsoft',
    title: 'Xbox Series X 游戏主机 1TB',
    currentPrice: '3,699',
    image: 'https://images.unsplash.com/photo-1621259182978-fbf93132d53d?w=400&h=400&fit=crop&crop=center',
    features: ['4K游戏', '120fps', '向下兼容'],
    salesCount: '1.6k+',
    rating: '4.7'
  },
  {
    id: 12,
    brand: 'Adidas',
    title: 'Ultra Boost 22 跑步鞋 白色',
    currentPrice: '1,299',
    image: 'https://images.unsplash.com/photo-1551107696-a4b0c5a0d9a2?w=400&h=400&fit=crop&crop=center',
    features: ['Boost科技', 'Primeknit鞋面', '舒适缓震'],
    salesCount: '3.7k+',
    rating: '4.5'
  }
])

// 方法
const handlePromoClick = () => {
  router.push('/promotions')
}

const handleCategoryCardClick = (card: any) => {
  // 根据卡片标题跳转到对应分类
  const categoryMap = {
    '时尚服饰': 'fashion-sports',
    '手机数码': 'mobile-digital',
    '游戏娱乐': 'books-games',
    '优惠专区': 'promotions'
  }
  const categoryPath = categoryMap[card.title as keyof typeof categoryMap]
  if (categoryPath) {
    router.push(`/category/${categoryPath}`)
  }
}

const handleProductClick = (product: any) => {
  selectedProduct.value = product
  showProductModal.value = true
}

const handleBuyNow = (product: any) => {
  alert(`立即购买：${product.title}`)
  showProductModal.value = false
}

const handleAddToCart = (product: any) => {
  alert(`已加入购物车：${product.title}`)
  showProductModal.value = false
}
</script>

<style scoped>
/* 产品详情模态框样式 */
.product-modal-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  align-items: start;
}

.product-modal-image {
  text-align: center;
}

.product-modal-image img {
  width: 100%;
  max-width: 300px;
  height: auto;
  border-radius: 12px;
}

.product-modal-info {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.product-modal-title {
  font-size: 24px;
  font-weight: 700;
  color: #2d3436;
  margin: 0;
}

.product-modal-brand {
  font-size: 14px;
  color: #667eea;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.product-modal-price {
  display: flex;
  align-items: center;
  gap: 12px;
}

.product-modal-price .current-price {
  font-size: 28px;
  font-weight: 700;
  color: #e74c3c;
}

.product-modal-price .original-price {
  font-size: 18px;
  color: #bdc3c7;
  text-decoration: line-through;
}

.product-modal-features h4 {
  font-size: 16px;
  font-weight: 600;
  color: #2d3436;
  margin-bottom: 8px;
}

.product-modal-features ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.product-modal-features li {
  padding: 4px 0;
  color: #636e72;
  position: relative;
  padding-left: 20px;
}

.product-modal-features li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: #27ae60;
  font-weight: bold;
}

.product-modal-stats {
  display: flex;
  gap: 20px;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.stat-label {
  font-size: 14px;
  color: #636e72;
}

.stat-value {
  font-weight: 600;
  color: #2d3436;
}

.product-modal-actions {
  display: flex;
  gap: 12px;
  margin-top: 20px;
}

.btn {
  flex: 1;
  padding: 12px 20px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.btn-primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.btn-secondary {
  background: #f8f9fa;
  color: #495057;
}

.btn-secondary:hover {
  background: #e9ecef;
}

@media (max-width: 768px) {
  .product-modal-content {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .product-modal-actions {
    flex-direction: column;
  }
}
</style> 